<template>
  <el-container class="hy-container">
    <el-main class="hy-main">
      <el-row type="flex" class="row-bg" justify="space-between" align="middle">
        <el-col :span="12" class="route">
          <span style="padding-left: 5px;font-weight: bold;">首页</span>
          <i class="el-icon-arrow-right"></i>
          <el-tag
            class="tag"
            v-for="(tag,index) in route"
            :key="index"
            :disable-transitions="false"
            @close="handleClose(tag)"
            closable
          >{{tag.value}}</el-tag>
        </el-col>
        <el-col :span="12" class="text-right">
          <el-input
            style="width:260px"
            placeholder="搜索"
            prefix-icon="el-icon-search"
            v-model="postData.searchKey"
            @input="changeSearch"
            @keyup.enter.native="search(1)"
          ></el-input>
        </el-col>
      </el-row>
      <el-row class="noData" v-if="pageStatus==0">
        <img src="../../assets/images/noGoods.png" />
        <span>抱歉！没有找到"{{currentSearchKey}}相关的产品。</span>
      </el-row>
      <el-row class="condition" type="flex" align="middle">
        <div class="box">
          <div class="title">年份</div>
          <div class="list" v-if="yearType==1">
            <div v-for="(item,i) in range.year" :key="i" @click="select('year',item)">{{item}}</div>
          </div>
          <el-checkbox-group class="checkboxDiv" v-model="subData.yearArray" v-else>
            <el-checkbox v-for="(item,i) in range.year" :key="i" :label="item"></el-checkbox>
            <el-button
              style="margin-left: 30px"
              size="mini"
              type="primary"
              v-if="yearType==2"
              @click="confirm"
            >确定</el-button>
          </el-checkbox-group>
          <div class="rightArea">
            <el-button size="mini" v-if="yearType==1" @click="changeType('year',2)">多选</el-button>
          </div>
        </div>
        <div class="box">
          <div class="title">品类</div>
          <div class="list">
            <div
              v-for="(item,i) in range.categories"
              @click="select('categories',item)"
              :key="i"
            >{{item}}</div>
          </div>
        </div>
        <div class="box">
          <div class="title">材质</div>
          <div class="list">
            <div
              v-for="(item,i) in range.materials"
              @click="select('materials',item)"
              :key="i"
            >{{item}}</div>
          </div>
        </div>
        <div class="box">
          <div class="title">金额</div>
          <div class="list">
            <el-input
              size="mini"
              style="margin-right:0"
              class="priceRange"
              placeholder="请输入最小金额"
              v-model.number="min"
            ></el-input>
            <span style="margin: 0 10px">-</span>
            <el-input size="mini" class="priceRange" placeholder="请输入最大金额" v-model.number="max"></el-input>
            <el-button size="mini" type="primary" @click="priceConfirm">确定</el-button>
          </div>
        </div>
        <div class="box">
          <div class="title">供应商</div>
          <div class="list">
            <div
              v-for="(item,i) in options"
              :key="i"
              @click="select('supplier',item.id,item.custsimpname)"
            >{{item.custsimpname}}</div>
          </div>
        </div>
      </el-row>
      <el-row class="goodsList" v-loading="loading" style="margin-top:20px;min-height:400px">
        <el-col class="goodCol" :span="6" v-for="(item,index) in goodsList" :key="index">
          <el-card
            :body-style="{ padding: '0px' }"
            class="good"
            @click.native="goDetail(item.id,item.code)"
          >
            <el-image :src="item.picture" style="height:255px">
              <div slot="error">
                <div class="image-slot">
                  <img src="../../assets/images/noImg.png" />
                </div>
              </div>
            </el-image>
            <div class="goodsTitle">{{item.name||"暂无编号"}}</div>
            <div class="orderInfo">
              <div class="section">
                <span class="col9E">{{item.code}}</span>
              </div>
              <div class="offer">{{item.quotedTimes||0}}次报价</div>
              <div class="price">
                <span class="colRed">${{item.price||0}}</span>
                <img src="../../assets/images/example/shopping.png" />
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <LiuPagination
        style="padding-bottom: 30px"
        :paginationInfo="paginationInfo"
        @changePage="changePage"
      ></LiuPagination>
    </el-main>
  </el-container>
</template>

<script>
import store from "@/utils/factory";
import config from "@/config/index";
import apiMethod from "@/api/apiMethod";
import { fuzzysearch } from "@/api/login";
import { query, getProductDetail } from "@/api/product";
export default {
  computed: {},
  name: "resultPage",
  data() {
    return {
      pageStatus: 1,
      currentSearchKey: "",
      postData: {
        searchKey: ""
      },
      subData: {
        yearArray: []
      },
      min: "",
      max: "",
      loading: "",
      yearType: 1,
      range: {},
      options: [],
      src:
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      searchData: "",
      paginationInfo: {
        currentPage: 1,
        pageSize: 12,
        total: 100
      },
      searchList: [],
      goodsList: [],
      route: []
    };
  },
  created() {
    if (this.$route.query) {
      if (this.$route.query.searchKey) {
        this.postData.searchKey = this.$route.query.searchKey;
      }
    }
    this.search();
    this.getfuzzy();
  },
  mounted() {},
  methods: {
    goDetail(id, code) {
      this.$router.push({
        path: "/detail",
        query: {
          id: id,
          code: code
        }
      });
    },
    priceConfirm() {
      this.postData.price = {
        min: this.min,
        max: this.max
      };
      this.currentSearchKey = `金额区间为${this.min}~${this.max}`;
      let flag = false;
      if (this.route.length > 0) {
        this.route.forEach((item, index) => {
          if (item.name == "price") {
            item.value = `${this.min}元~${this.max}元`;
            flag = true;
          }
        });
      }
      if (!flag && this.postData.price) {
        this.route.push({
          name: "price",
          value: `${this.min}元~${this.max}元`
        });
      }
      this.search();
    },
    changeType(selectType, modeType) {
      if (selectType == "year") {
        this.yearType = modeType;
      }
    },
    handleClose(tag) {
      console.log(tag);
      this.route.splice(this.route.indexOf(tag), 1);
      if (tag.name == "year") {
        this.postData.year = "";
      }
      if (tag.name == "categories") {
        this.postData.categories = "";
      }
      if (tag.name == "price") {
        this.postData.price = {
          max: this.range.price.max,
          min: this.range.price.min
        };
      }
      if (tag.name == "supplier") {
        this.postData.supplier = "";
      }
      if (tag.name == "meterials") {
        this.postData.meterials = "";
      }
      if (tag.name == "searchKey") {
        this.postData.searchKey = "";
      }
      this.search();
    },
    changeSearch(val) {
      this.pageStatus = 1;
      this.postData.searchKey = val;
      this.currentSearchKey = "关键词是" + val;
    },
    getfuzzy() {
      let self = this;
      const formData = new FormData();
      let params = {
        method: apiMethod.getfuzzy,
        terminalType: 1
      };
      params = Object.assign(config.commonParmas, params);
      Object.keys(params).forEach(key => {
        formData.append(key, params[key]);
      });
      fuzzysearch(formData).then(res => {
        self.options = res.data;
      });
    },
    search(type) {
      if (type == 1) {
        this.paginationInfo.currentPage = 1;
      }
      let self = this;
      let flag = false;
      this.loading = true;
      if (this.route.length > 0) {
        this.route.forEach((item, index) => {
          if (item.name == "searchKey") {
            item.value = self.postData.searchKey;
            flag = true;
          }
        });
      }
      if (!flag && this.postData.searchKey) {
        this.route.push({ name: "searchKey", value: this.postData.searchKey });
      }
      let parmas = {
        ...this.postData,
        pageInfo: {
          rows: self.paginationInfo.pageSize,
          page: self.paginationInfo.currentPage
        }
      };
      query(parmas)
        .then(res => {
          let req = res.data;
          if (req) {
            if (req.products.length == 0) {
              this.loading = false;
              this.pageStatus = 0;
              this.goodsList = [];
              return false;
            }
            this.pageStatus = 1;
            this.goodsList = req.products;
            this.range = req.range;
            this.min = req.range.price.min;
            this.max = req.range.price.max;
            this.paginationInfo.total = req.total;
          }
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
        });
    },
    changePage({ currentPage }) {
      this.search();
    },
    confirm() {
      let self = this;
      if (this.subData.yearArray.length > 0) {
        this.postData.year = this.subData.yearArray.join(",");
        this.currentSearchKey = `年份是${this.postData.year}`;
        let flag = false;
        if (this.route.length > 0) {
          this.route.forEach((item, index) => {
            if (item.name == "year") {
              item.value = self.postData.year;
              flag = true;
            }
          });
        }
        if (!flag) {
          this.route.push({
            name: "year",
            value: this.postData.year
          });
        }
        this.search();
      }
      this.yearType = 1;
    },
    select(type, val, name) {
      let flag = false;
      if (this.route.length > 0) {
        this.route.forEach((item, index) => {
          if (item.name == type) {
            if (type == "supplier") {
              item.value = name;
            } else {
              item.value = val;
            }
            flag = true;
          }
        });
      }
      if (!flag) {
        if (type == "supplier") {
          this.route.push({ name: type, value: name });
        } else {
          this.route.push({ name: type, value: val });
        }
      }
      if (type == "year") {
        this.postData.year = val;
        this.currentSearchKey = "年份是" + val;
      }
      if (type == "materials") {
        this.postData.meterials = val;
        this.currentSearchKey = "材质是" + val;
      }
      if (type == "categories") {
        this.postData.categories = val;
        this.currentSearchKey = "品类是" + val;
      }
      if (type == "supplier") {
        this.postData.supplier = val;
        this.currentSearchKey = "供应商是" + name;
      }
      this.search();
    }
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
.route {
  text-align: left;
  font-size: 14px;
  letter-spacing: 2px;
}
.routeInfo {
  display: inline;
}

.priceRange {
  display: inline-block !important;
  width: 200px !important;
  text-align: center;
}

.image-slot {
  width: 255px;
  height: 255px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.02);
  img {
    width: 82px;
  }
}

.checkboxDiv {
  border: 1px solid #dfdfdf;
  padding: 10px;
  border-radius: 4px;
  // flex: 1;
  text-align: left;
  transition: all 0.6s;
}

.tag {
  &:first-of-type {
    margin-left: 6px;
  }
  margin-right: 6px;
}

.noData {
  text-align: left;
  background: rgba(255, 0, 0, 0.1);
  display: flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 4px;
  margin-top: 15px;
  font-size: 14px;
  img {
    width: 67px;
    margin-right: 15px;
  }
}

.goodsList {
  .goodCol {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
  }
  .goodsTitle {
    position: relative;
    padding: 15px;
    text-align: left;
    color: #777777;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: #f5f5f5;
    }
  }

  .orderInfo {
    position: relative;
    .price {
      font-size: 18px;
      position: absolute;
      right: 15px;
      top: 15px;
      img {
        width: 24px;
        vertical-align: top;
        margin-left: 5px;
      }
    }
  }
  .section {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    justify-content: space-between;
  }

  .offer {
    padding-left: 12px;
    text-align: left;
    color: #909399;
  }
}

.hy-main {
  width: 1080px;
  margin: 0 auto;
  padding: 40px 0;
}

.sum {
  color: #909399;
  letter-spacing: 0;
}

.good {
  font-size: 12px;
  border-radius: 12px;
  width: 255px;
  height: 355px;
  background: #fff;
  &:hover {
    cursor: pointer;
    transform: translateY(-5px);
  }
}

.condition {
  font-size: 14px;
  margin-top: 15px;
  background: #fff;
  padding: 15px;
  flex-direction: column;
  border-bottom: 2px solid #f2f6fc;
  .rightArea {
    position: absolute;
    right: 15px;
  }
  .title {
    color: #909399;
    width: 80px;
    text-align: left;
  }
  .box {
    display: flex;
    width: 100%;
    align-items: center;
  }
  .box:not(:last-child) {
    margin-bottom: 20px;
  }
  .list {
    div {
      cursor: pointer;
      display: inline;
      &:hover {
        color: #2878ff;
        cursor: pointer;
        transition: all 0.3s;
      }
    }
    div:not(:last-child) {
      margin-right: 30px;
    }
  }
}
</style>